<template>
  <view>
    <m-top :autoBack="false" :bgChangeByScroll="true" bgColor="transparent" @getHeight="getGlHeight">
      <view class="c333 font32 fw500">展区</view>
    </m-top>

    <m-container :top="0" v-if="glTop">
      <u-sticky zIndex="8" :offsetTop="0" :customNavHeight="0">
        <view
          class="pdv40 liner-header"
          :style="{
            'padding-top': glPdt + 'px',
          }"
        >
          <!-- 输入框 -->
          <u--input
            :customStyle="{
              height: '80rpx',
              'border-radius': '20rpx',
              'background-color': '#ffffff',
              padding: '0 40rpx',
              'font-size': '28rpx',
              color: '#333333',
            }"
            v-model="keyword"
            :placeholderStyle="{
              color: '#BBBBBB',
              'font-size': '28rpx',
            }"
            placeholder="请输入关键字"
          >
            <template slot="suffix">
              <view class="search-right">
                <u-icon color="#575B66" size="46rpx" name="search"></u-icon>
              </view>
            </template>
          </u--input>

          <!--  -->
          <view class="mgt30">
            <m-tabs :list="tabs" :current="tabIndex" @change="(e) => (tabIndex = e.index)"></m-tabs>
          </view>
        </view>
      </u-sticky>
      <!--  -->
      <view class="mgt40 pdv40">
        <panel-technology :key="1" v-if="tabIndex === 0"></panel-technology>
        <panel-technology :key="2" v-else-if="tabIndex === 1" :isNext="true"></panel-technology>
        <panel-salon v-else-if="tabIndex === 2"></panel-salon>
      </view>
    </m-container>

    <m-tabbar path="pages/hall/index"></m-tabbar>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import PanelTechnology from "./components/card-technology.vue";
import PanelSalon from "./components/card-salon";

export default {
  mixins: [GlTopMixin],
  components: { PanelTechnology, PanelSalon },
  data() {
    return {
      keyword: "",
      tabIndex: 0,
      tabs: [
        {
          name: "领先技术",
        },
        {
          name: "行业赋能",
        },
        {
          name: "技术沙龙",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
// .search-right {
//   padding-right: 20rpx;
// }
</style>
